<template>
  <div class="workbench">
    <a-row :gutter="[8, 8]" :wrap="true">
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head_tenant">
            <div class="head">租客增长趋势图</div>
            <div :style="{ flex: '1' }">
              <a-row :gutter="[16, 16]" justify="end">
                <a-col :span="6">
                  <a-select
                    :style="{ width: '100%' }"
                    v-model:value="is_personal"
                    :options="tenantOptionsList"
                    @change="() => getTenantChart()"
                  />
                </a-col>
                <a-col :span="6">
                  <a-date-picker
                    :style="{ width: '100%' }"
                    v-model:value="tenantYear"
                    picker="year"
                    placeholder="请选择年份"
                    @change="onTenantYearChange"
                    format="YYYY年"
                    :allowClear="false"
                    :disabledDate="disabledYear"
                  />
                </a-col>
              </a-row>
            </div>
          </a-col>
          <div
            id="tenant-chart"
            style="margin-right: 100px"
            v-show="tenantList.length"
          ></div>
          <Empty
            style="margin-top: 200px"
            :image="simpleImage"
            v-show="tenantList.length == 0"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head_tenant">
            <div class="head">租客员工增长趋势图</div>
            <div :style="{ flex: '1' }">
              <a-row :gutter="[16, 16]" justify="end">
                <a-col :span="6">
                  <a-select
                    :style="{ width: '100%' }"
                    v-model:value="employeeOwnerId"
                    placeholder="请选择租客"
                    :options="employeeOptionsList"
                    allow-clear
                    @change="() => getEmployeeChart()"
                  />
                </a-col>
                <a-col :span="6">
                  <a-date-picker
                    :style="{ width: '100%' }"
                    v-model:value="employeeYear"
                    picker="year"
                    placeholder="请选择年份"
                    @change="onEmployeeYearChange"
                    format="YYYY年"
                    :allowClear="false"
                    :disabledDate="disabledYear"
                  />
                </a-col>
              </a-row>
            </div>
          </a-col>
          <div
            id="employee-chart"
            style="margin-right: 100px"
            v-show="employeeList.length"
          ></div>
          <Empty
            style="margin-top: 200px"
            :image="simpleImage"
            v-show="employeeList.length === 0"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">标签分析 </a-col>
          <!-- <a-col style="margin: 10px 0">
        <a-space direction="vertical">
          <a-select v-model:value="type">
            <a-select-option value="time">Time</a-select-option>
            <a-select-option value="date">Date</a-select-option>
            <a-select-option value="week">Week</a-select-option>
            <a-select-option value="month">Month</a-select-option>
            <a-select-option value="quarter">Quarter</a-select-option>
            <a-select-option value="year">Year</a-select-option>
          </a-select>
          <a-range-picker v-model="pickerValue" picker="year" />
        </a-space>
      </a-col> -->
          <div
            id="labelAnalysis"
            style="margin-right: 100px"
            v-show="tagAnalyseList.length"
          ></div>
          <Empty
            style="margin-top: 200px"
            :image="simpleImage"
            v-show="tagAnalyseList.length == 0"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">行业分析 </a-col>
          <!-- <a-col style="margin: 10px 0">
          <a-space direction="vertical">
            <a-select v-model:value="type">
              <a-select-option value="time">Time</a-select-option>
              <a-select-option value="date">Date</a-select-option>
              <a-select-option value="week">Week</a-select-option>
              <a-select-option value="month">Month</a-select-option>
              <a-select-option value="quarter">Quarter</a-select-option>
              <a-select-option value="year">Year</a-select-option>
            </a-select>
            <a-range-picker v-model="pickerValue" picker="year" />
          </a-space>
        </a-col> -->
          <div
            id="industryAnalysis2"
            class="chart"
            style="padding-right: 100px"
          ></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">签约企业注册资金分布 </a-col>
          <!-- <a-col style="margin: 10px 0">
          <a-space direction="vertical">
            <a-select v-model:value="type">
              <a-select-option value="time">Time</a-select-option>
              <a-select-option value="date">Date</a-select-option>
              <a-select-option value="week">Week</a-select-option>
              <a-select-option value="month">Month</a-select-option>
              <a-select-option value="quarter">Quarter</a-select-option>
              <a-select-option value="year">Year</a-select-option>
            </a-select>
            <a-range-picker v-model="pickerValue" picker="year" />
          </a-space>
        </a-col> -->
          <div
            id="fundDistribution"
            class="chart"
            style="padding-right: 100px"
          ></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">签约企业注册年限分布 </a-col>
          <div
            id="ageDistribution"
            class="chart"
            style="padding-right: 100px"
          ></div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head">逾期率排名 </a-col>
          <a-col style="margin: 10px 0">
            <a-range-picker
              :mode="[pickerRanking, pickerRanking]"
              v-model:value="rankingMoment"
              :allowClear="false"
              @change="overdueRanking"
            />
          </a-col>
          <div
            id="overdueRankings"
            class="chart"
            v-show="overdueRankingList.length"
          ></div>
          <Empty
            style="margin-top: 200px"
            :image="simpleImage"
            v-show="overdueRankingList.length == 0"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card style="height: 650px; padding: 10px">
          <a-col class="head" style="margin-bottom: 50px">在租面积排名 </a-col>
          <!-- <a-col style="margin: 10px 0">
          <a-space direction="vertical">
            <a-select v-model:value="type">
              <a-select-option value="time">Time</a-select-option>
              <a-select-option value="date">Date</a-select-option>
              <a-select-option value="week">Week</a-select-option>
              <a-select-option value="month">Month</a-select-option>
              <a-select-option value="quarter">Quarter</a-select-option>
              <a-select-option value="year">Year</a-select-option>
            </a-select>
            <a-range-picker v-model="pickerValue" picker="year" />
          </a-space>
        </a-col> -->
          <div id="areaRanking" class="chart"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  onMounted,
  onUnmounted,
  reactive,
  toRefs,
} from "vue";
import { QuestionCircleOutlined } from "@ant-design/icons-vue";
import { Chart } from "@antv/g2";
import request from "../../../common/utils/request";
import { Empty, message, Modal, Progress } from "ant-design-vue";

import moment from "moment";
const dateFormat = "YYYY-MM-DD";
export default defineComponent({
  name: "homeOwnerOverview",
  components: {
    Empty,
  },
  setup() {
    const simpleImage = ref(Empty.PRESENTED_IMAGE_SIMPLE);
    // 标签分析
    const chartRanking = {};

    const vacantList = {};
    const tagAnalyseList = ref([]);

    const state = reactive({
      tenantList: [], // 租客增长趋势
      employeeList: [], // 租客员工增长趋势
      is_personal: 2,
      tenantOptionsList: TENANT_OPTIONS,
      tenantYear: moment(),
      employeeOwnerId: undefined,
      employeeOptionsList: [],
      employeeYear: moment(),
    });

    const onTenantYearChange = (date, dateString) => {
      getTenantChart();
    };

    const onEmployeeYearChange = (date, dateString) => {
      getEmployeeChart();
    };

    const labelAnalysis = () => {
      if (!vacantList.chart2) {
        vacantList.chart2 = new Chart({
          container: "labelAnalysis",
          autoFit: true,
          width: 700,
          height: 500,
          padding: [80, 0, 80, 0],
        });
      }

      request.get("/org", "/board/tagAnalyse").then((res) => {
        vacantList.chart2.data(res.list);
        tagAnalyseList.value = res.list;
        // 新建一个 view 用来单独渲染Annotation
        vacantList.chart2.coordinate("theta", {
          radius: 0.65,
          innerRadius: 0.8,
        });

        vacantList.chart2.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });

        // 声明需要进行自定义图例字段： 'item'
        vacantList.chart2.legend("tagName", {
          position: "right", // 配置图例显示位置
          custom: true, // 关键字段，告诉 G2，要使用自定义的图例
          items: res.list.map((obj, index) => {
            return {
              name: obj.tagName + `           ` + obj.total, // 对应 itemName
              value: obj.percent, // 对应 itemValue
              marker: {
                symbol: "square", // marker 的形状
                style: {
                  r: 5, // marker 图形半径
                  fill: vacantList.chart2.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                },
              }, // marker 配置
            };
          }),
          itemValue: {
            style: {
              fill: "#999",
            }, // 配置 itemValue 样式
            formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
          },
        });

        vacantList.chart2
          .interval()
          .adjust("stack")
          .position("percent")
          .color("tagName")
          .style({
            fillOpacity: 1,
          })
          .state({
            active: {
              style: (element) => {
                const shape = element.shape;
                return {
                  lineWidth: 10,
                  stroke: shape.attr("fill"),
                  strokeOpacity: shape.attr("fillOpacity"),
                };
              },
            },
          });

        // 移除图例点击过滤交互
        vacantList.chart2.removeInteraction("legend-filter");
        vacantList.chart2.interaction("element-active");

        vacantList.chart2.render();
      });
    };

    // 行业分析
    const industryAnalysis = () => {
      if (!vacantList.chart3) {
        vacantList.chart3 = new Chart({
          container: "industryAnalysis2",
          autoFit: true,
          height: 500,
          padding: [80, 20, 80, 0],
        });
      }

      let data = [];
      request.get("/org", "/board/industryAnalyse").then((res) => {
        data = res.list;
        vacantList.chart3.data(data);

        // 新建一个 view 用来单独渲染Annotation
        vacantList.chart3.coordinate("theta", {
          radius: 0.65,
          innerRadius: 0.8,
        });

        vacantList.chart3.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });

        // 声明需要进行自定义图例字段： 'item'
        vacantList.chart3.legend("industryName", {
          position: "right", // 配置图例显示位置
          custom: true, // 关键字段，告诉 G2，要使用自定义的图例
          items: data.map((obj, index) => {
            return {
              name: obj.industryName + `           ` + obj.total, // 对应 itemName
              value: obj.percent, // 对应 itemValue
              marker: {
                symbol: "square", // marker 的形状
                style: {
                  r: 5, // marker 图形半径
                  fill: vacantList.chart3.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                },
              }, // marker 配置
            };
          }),
          itemValue: {
            style: {
              fill: "#999",
            }, // 配置 itemValue 样式
            formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
          },
        });

        vacantList.chart3
          .interval()
          .adjust("stack")
          .position("percent")
          .color("industryName")
          .style({
            fillOpacity: 1,
          })
          .state({
            active: {
              style: (element) => {
                const shape = element.shape;
                return {
                  lineWidth: 10,
                  stroke: shape.attr("fill"),
                  strokeOpacity: shape.attr("fillOpacity"),
                };
              },
            },
          });

        // 移除图例点击过滤交互
        vacantList.chart3.removeInteraction("legend-filter");
        vacantList.chart3.interaction("element-active");

        vacantList.chart3.render();
      });
    };

    // 签约企业注册资金分布
    const fundDistribution = () => {
      let data = [];
      if (!vacantList.chart4) {
        vacantList.chart4 = new Chart({
          container: "fundDistribution",
          autoFit: true,
          height: 500,
          padding: [80, 220, 80, 0],
        });
      }

      // 新建一个 view 用来单独渲染Annotation
      vacantList.chart4.coordinate("theta", {
        radius: 0.55,
        innerRadius: 0.8,
      });
      request.get("/org", "/owner/capitalSpread").then((res) => {
        data = res.list;
        vacantList.chart4.data(data);
        vacantList.chart4.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });
        vacantList.chart4
          .annotation()
          .text({
            position: ["50%", "50%"],
            content: "总计",
            style: {
              fontSize: 14,
              fill: "#8c8c8c",
              textAlign: "center",
            },
            offsetY: -20,
          })
          .text({
            position: ["50%", "50%"],
            content: res.totals,
            style: {
              fontSize: 24,
              fill: "#8c8c8c",
              textAlign: "center",
              fontWeight: 600,
            },
            offsetX: -10,
            offsetY: 10,
          })
          .text({
            position: ["50%", "50%"],
            content: "个",
            style: {
              fontSize: 24,
              fill: "#8c8c8c",
              textAlign: "center",
              fontWeight: 600,
            },
            offsetY: 10,
            offsetX: 34,
          });

        // 声明需要进行自定义图例字段： 'item'
        vacantList.chart4.legend("groupName", {
          position: "right", // 配置图例显示位置
          custom: true, // 关键字段，告诉 G2，要使用自定义的图例
          items: data.map((obj, index) => {
            return {
              name: obj.groupName + `   ` + obj.total, // 对应 itemName
              value: obj.percent, // 对应 itemValue
              marker: {
                style: {
                  r: 5, // marker 图形半径
                  fill: vacantList.chart4.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                },
              }, // marker 配置
            };
          }),
          itemValue: {
            style: {
              fill: "#999",
            }, // 配置 itemValue 样式
            formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
          },
        });

        vacantList.chart4
          .interval()
          .adjust("stack")
          .position("percent")
          .color("groupName")
          .style({
            fillOpacity: 1,
          })
          .state({
            active: {
              style: (element) => {
                const shape = element.shape;
                return {
                  lineWidth: 10,
                  stroke: shape.attr("fill"),
                  strokeOpacity: shape.attr("fillOpacity"),
                };
              },
            },
          });

        // 移除图例点击过滤交互
        vacantList.chart4.removeInteraction("legend-filter");
        vacantList.chart4.interaction("element-active");
        vacantList.chart4.render();
      });
    };

    // 签约企业注册年限分布
    const ageDistribution = () => {
      let data = [];
      if (!vacantList.chart5) {
        vacantList.chart5 = new Chart({
          container: "ageDistribution",
          autoFit: true,
          height: 500,
          padding: [80, 220, 80, 0],
        });
      }

      // 新建一个 view 用来单独渲染Annotation
      vacantList.chart5.coordinate("theta", {
        radius: 0.55,
        innerRadius: 0.8,
      });
      request.get("/org", "/owner/companyYearSpread").then((res) => {
        data = res.list;
        vacantList.chart5.data(data);

        vacantList.chart5.tooltip({
          showCrosshairs: false,
          shared: false,
          showMarkers: false,
        });

        vacantList.chart5
          .annotation()
          .text({
            position: ["50%", "50%"],
            content: "总计",
            style: {
              fontSize: 14,
              fill: "#8c8c8c",
              textAlign: "center",
            },
            offsetY: -20,
          })
          .text({
            position: ["50%", "50%"],
            content: res.totals,
            style: {
              fontSize: 24,
              fill: "#8c8c8c",
              textAlign: "center",
              fontWeight: 600,
            },
            offsetX: -10,
            offsetY: 10,
          })
          .text({
            position: ["50%", "50%"],
            content: "个",
            style: {
              fontSize: 24,
              fill: "#8c8c8c",
              textAlign: "center",
              fontWeight: 600,
            },
            offsetY: 10,
            offsetX: 34,
          });

        // 声明需要进行自定义图例字段： 'item'
        vacantList.chart5.legend("groupName", {
          position: "right", // 配置图例显示位置
          custom: true, // 关键字段，告诉 G2，要使用自定义的图例
          items: data.map((obj, index) => {
            return {
              name: obj.groupName + `   ` + obj.total, // 对应 itemName
              value: obj.percent, // 对应 itemValue
              marker: {
                style: {
                  r: 5, // marker 图形半径
                  fill: vacantList.chart5.getTheme().colors10[index], // marker 颜色，使用默认颜色，同图形对应
                },
              }, // marker 配置
            };
          }),
          itemValue: {
            style: {
              fill: "#999",
            }, // 配置 itemValue 样式
            formatter: (val) => `(${val}%)`, // 格式化 itemValue 内容
          },
        });

        vacantList.chart5
          .interval()
          .adjust("stack")
          .position("percent")
          .color("groupName")
          .style({
            fillOpacity: 1,
          })
          .state({
            active: {
              style: (element) => {
                const shape = element.shape;
                return {
                  lineWidth: 10,
                  stroke: shape.attr("fill"),
                  strokeOpacity: shape.attr("fillOpacity"),
                };
              },
            },
          });

        // 移除图例点击过滤交互
        vacantList.chart5.removeInteraction("legend-filter");
        vacantList.chart5.interaction("element-active");

        vacantList.chart5.render();
      });
    };

    // 逾期排名
    const pickerRanking = ref("date");
    const rankingMoment = ref([moment().dayOfYear(1), moment().dayOfYear(365)]);
    const overdueRankingList = ref([]);
    const overdueRanking = () => {
      if (!chartRanking.chart1) {
        chartRanking.chart1 = new Chart({
          container: "overdueRankings",
          autoFit: true,
          height: 500,
          width: 800,
          padding: [90, 50, 90, 120],
        });
        chartRanking.chart1.scale({
          percent: {
            max: 100,
            min: 0,
            nice: true,
          },
        });
        chartRanking.chart1.axis("percent", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
            rotate: -1,
            offset: 5,
            offsetX: -10,
          },
        });
        chartRanking.chart1.coordinate().transpose();
        chartRanking.chart1.annotation().text({
          content: "租客名",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -335,
          offsetX: -30,
        });

        chartRanking.chart1.annotation().text({
          position: ["103%", "100%"],
          content: "%",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 500,
        });

        chartRanking.chart1.tooltip({
          showMarkers: false,
        });

        chartRanking.chart1.axis({
          label: {
            rotate: -1,
          },
        });

        chartRanking.chart1.interaction("active-region");
        chartRanking.chart1
          .interval()
          .position("owner*percent")
          .style({ radius: [20, 20, 20, 20] })
          .color("name")
          .size(20);
        chartRanking.chart1.legend(false);
      }

      if (!rankingMoment.value.length) {
        overdueRankingList.value = [];
        chartRanking.chart1.changeData([]);
        chartRanking.chart1.render();
        return;
      }
      request
        .get("/org", "/board/overdueRank", {
          start_date: rankingMoment.value[0].format(dateFormat),
          end_date: rankingMoment.value[1].format(dateFormat),
        })
        .then((res) => {
          overdueRankingList.value = res.list;
          chartRanking.chart1.changeData(res.list);
          chartRanking.chart1.render();
        });
    };

    // 在租面积排名
    const areaRanking = () => {
      let data = [];
      if (!vacantList.chart6) {
        vacantList.chart6 = new Chart({
          container: "areaRanking",
          autoFit: true,
          height: 500,
          padding: [90, 50, 90, 120],
        });
      }

      request.get("/org", "/owner/rentAreaRank").then((res) => {
        data = res.list;
        vacantList.chart6.changeData(data);
        vacantList.chart6.scale({
          totalArea: {
            min: 0,
            nice: true,
          },
        });
        vacantList.chart6.axis("totalArea", {
          animate: true,
          label: {
            formatter: (val) => {
              return +val;
            },
            rotate: -1,
            offset: 5,
            offsetX: -10,
          },
        });
        vacantList.chart6.coordinate().transpose();
        vacantList.chart6.annotation().text({
          content: "租客名",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          offsetY: -340,
          offsetX: -40,
        });
        vacantList.chart6.annotation().text({
          position: ["103%", "100%"],
          content: "m²",
          style: {
            fill: "#8c8c8c",
            fontWeight: 300,
          },
          // offsetY: 0,
          // offsetX: 550,
        });

        vacantList.chart6.tooltip({
          showMarkers: false,
        });

        vacantList.chart6.axis({
          label: {
            rotate: -1,
          },
        });

        vacantList.chart6.interaction("active-region");
        vacantList.chart6
          .interval()
          .position("ownerName*totalArea")
          .style({ radius: [20, 20, 20, 20] })
          .color("name")
          .size(20);
        vacantList.chart6.legend(false);
        vacantList.chart6.render();
      });
    };

    const getTenantChart = () => {
      if (!vacantList.chart7) {
        vacantList.chart7 = new Chart({
          container: "tenant-chart",
          autoFit: true,
          height: 500,
          width: 800,
          padding: [90, 50, 90, 120],
        });
        vacantList.chart7.scale({
          percent: {
            max: 100,
            min: 0,
            nice: true,
          },
        });

        vacantList.chart7.tooltip({
          showMarkers: false,
        });

        vacantList.chart7.interaction("active-region");
        vacantList.chart7
          .interval()
          .position("date*total")
          .color("name")
          .size(20);
      }
      let params = {
        year: state.tenantYear.year(),
      };
      if (state.is_personal !== 2) {
        params.is_personal = state.is_personal;
      }
      request.get("/org", "/owner/ownerIncrTrend", params).then((res) => {
        state.tenantList = res.list;
        vacantList.chart7.changeData(res.list);
        // vacantList.chart7.render();
      });
    };

    const getEmployeeChart = () => {
      if (!vacantList.chart8) {
        vacantList.chart8 = new Chart({
          container: "employee-chart",
          autoFit: true,
          height: 500,
          width: 800,
          padding: [90, 50, 90, 120],
        });
        vacantList.chart8.scale({
          percent: {
            max: 100,
            min: 0,
            nice: true,
          },
        });

        vacantList.chart8.tooltip({
          showMarkers: false,
        });

        vacantList.chart8.interaction("active-region");
        vacantList.chart8
          .interval()
          .position("date*total")
          .color("name")
          .size(20);
      }
      let params = {
        year: state.employeeYear.year(),
      };
      if (state.employeeOwnerId) {
        params.owner_id = state.employeeOwnerId;
      }
      request.get("/org", "/owner/ownerUserIncrTrend", params).then((res) => {
        state.employeeList = res.list;
        vacantList.chart8.changeData(res.list);
        // vacantList.chart8.render();
      });
    };

    const getOwnerList = () => {
      request.get("/org", "/owner/getTrendOwnerList").then((res) => {
        let _list = res.list.map((item) => {
          return {
            value: item.id,
            label: item.name,
          };
        });
        state.employeeOptionsList = _list;
      });
    };

    const init = () => {
      getOwnerList();
    };

    init();

    onMounted(() => {
      labelAnalysis();
      industryAnalysis();
      fundDistribution();
      ageDistribution();
      overdueRanking();
      areaRanking();
      getTenantChart(); // 租客增长趋势图
      getEmployeeChart(); // 租客员工增长趋势图
    });

    onUnmounted(() => {
      if (chartRanking.chart1) {
        chartRanking.chart1.destroy();
      }
      if (vacantList.chart2) {
        vacantList.chart2.destroy();
      }
      if (vacantList.chart3) {
        vacantList.chart3.destroy();
      }
      if (vacantList.chart4) {
        vacantList.chart4.destroy();
      }
      if (vacantList.chart5) {
        vacantList.chart5.destroy();
      }
      if (vacantList.chart6) {
        vacantList.chart6.destroy();
      }
      if (vacantList.chart7) {
        vacantList.chart7.destroy();
      }
      if (vacantList.chart8) {
        vacantList.chart8.destroy();
      }
    });

    const disabledYear = (current) => {
      return current > moment().endOf("year");
    };

    return {
      dateFormat,
      rankingMoment,
      overdueRanking,
      pickerRanking,
      vacantList,
      overdueRankingList,
      simpleImage,
      tagAnalyseList,
      ...toRefs(state),
      onTenantYearChange,
      onEmployeeYearChange,
      getTenantChart,
      getEmployeeChart,
      disabledYear,
    };
  },
});

const TENANT_OPTIONS = [
  {
    value: 2,
    label: "全部",
  },
  {
    value: 0,
    label: "企业",
  },
  {
    value: 1,
    label: "个人",
  },
];
</script>

<style lang="less" scoped>
.heads {
  margin-bottom: 10px;
  display: flex;
}
.linear {
  height: 1px;
  background-color: #f0f2f5;
}
.Line {
  width: 100%;
  height: 2px;
  background-color: #e7eaed;
}
.lineText {
  position: absolute;
  top: 6.4%;
  left: 48%;
  background-color: #f0f2f5;
  padding: 0 10px;
}
.chart-box {
  // height: 400px;
  background: #fff;
  padding: 10px;
  width: 49.5%;
}
.head {
  font-size: 18px;
  font-weight: 600;
}
.head_tenant {
  display: flex;
  justify-content: space-between;
}
.workbench {
  padding: 10px;
}
:deep(.ant-card-body){
  padding: 0px;
}
</style>
